<%@ page language="java" contentType="text/html; charset=utf-8"  
    pageEncoding="utf-8"%>  
<%@ include file="/WEB-INF/pages/pc/common/meta.jsp" %>
<!DOCTYPE html>
<html lang="en"> 
    <head>  
		<title>listdemo页</title>
		<%@ include file="/WEB-INF/pages/pc/common/script.jsp" %>
		<link rel="stylesheet" href="${ctx }/static/pc/js/grass/themes/default/css/datagrid.css">
		<script src="${ctx}/static/pc/js/grass/widget/datagrid.js"></script> 
		<script src="${ctx}/static/pc/js/grass/widget/pagination.js"></script> 
		<script type="text/javascript">
			$(document).ready(function(){
				$("#datagrid").datagrid({
					url: contextRootPath + "/pc/demo/getDatas",
					//datas: [{name:"唐赫",sex:"男"},{name:"张金星",sex:"男"},{name:"张金星1",sex:"男"}],
					columns: [
							  {title:"编号",field: "id", fomatter: function(value, rowData, rowIndex){
					        	  return "<input type=\"checkbox\" name=\"id\" value=\""+value+"\">";
					          }},
					          {title: "隐藏", field: "id", hidden: true},
					          {title:"姓名",field: "name",titleStyle: "width: 10%"},
					          {title:"性别",field: "sex"},
					          {title:"创建时间", field: "createtime", style: "color: #999"},
					          {title:"操作", fomatter: function(value, rowData, rowIndex){
					        	  return "<a href=\"#\" onclick=\"alert('您点击的是："+rowData.name+"');\">编辑</a>";
					          }}
					          ],// datagrid 的 column 的配置对象。
					nowrap: true,// True 就会把数据显示在一行里。 
					method: "post",// 请求远程数据的 method 类型。
					//loadMsg: "数据加载中",// 当从远程站点加载数据时，显示的提示信息。
					pagination: true,// True 就会在 datagrid 的底部显示分页栏。
					rownumbers: true,// True 就会显示行号的列。
					pageList: [],// 当设置了 pagination 特性时，初始化页面尺寸的选择列表。
					pageSize: 10,// 当设置了 pagination 特性时，初始化页码尺寸。
					pageNumber: 1,// 当设置了 pagination 特性时，初始化页码。
					queryParams: {}// 当请求远程数据时，发送的额外参数。
				});
			});
			
		</script> 
    </head>  
  
    <body>  
    	<div id="datagrid"></div>
    </body>  
</html>  